import React, { Component } from 'react'
import { Layout, Tabs } from 'antd';
import { ContainerOutlined,  DatabaseOutlined, MessageOutlined } from '@ant-design/icons';
import Middware from './components/index'
const { Content } = Layout;
export default class UserHistory extends Component {
    state = {
        data: [
            {
                id: 1,
                icon: ContainerOutlined,
                // <ContainerOutlined />
                name: '全部'
            },
            // {
            //     id: 2,
            //     icon: ScheduleOutlined,
            //     // <ScheduleOutlined />
            //     name: '课程'
            // },
            {
                id: 2,
                icon: DatabaseOutlined,
                // <DatabaseOutlined />
                name: '曲谱'
            },
            {
                id: 3,
                icon: MessageOutlined,
                // <MessageOutlined />
                name: '论坛'
            }
        ],
        historyName: '全部'
    }
    ClickHiddlen = (event) => {
        console.log(event);
        // const text = event.target.innerText
        if (event === '全部') return this.setState({ historyName: '全部' })
        // if (event === '课程') return this.setState({ historyName: '课程' })
        if (event === '曲谱') return this.setState({ historyName: '曲谱' })
        if (event === '论坛') return this.setState({ historyName: '论坛' })
    }
    render() {
        const { set } = this.props
        return (
            <Layout
                style={{
                    padding: '0 24px 24px',
                }}
            >

                <p style={{
                    margin: '16px 0',
                }}>{set}</p>
                <Content
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                        background: 'white',
                    }}
                >
                    <Tabs

                        defaultActiveKey="1"
                        // onChange={this.ClickHiddlen('1')}
                        items={this.state.data.map((item) => {
                            const id = String(item.id);
                            return {
                                label: (
                                    <>
                                        <span onClick={() => this.ClickHiddlen(item.name)} >
                                            <item.icon />
                                            {item.name}
                                        </span>
                                    </>
                                ),
                                key: id,
                                children: <Middware historyName={this.state.historyName} />,
                            };

                        })}
                    // onClick={(event) => this.ClickHiddlen(event)}
                    />
                </Content>
            </Layout>
        )
    }
}
